<template>
    <div class="table">
      <Table
        :columns="columns"
        :data="pageData"
        :border="true"
      >
        <Page
          :total="progressData.length"
          :current="page"
          :page-size="30"
          show-total
          @on-change="handlerPage"
          style="text-align: right"
        />
      </Table>
    </div>
  </template>
  
  <script>
  export default {
    name: "Table",
    data() {
      return {
        columns: [
                      {
                          title: 'Name',
                          key: 'name'
                      },
                      {
                          title: 'Age',
                          key: 'age'
                      },
                      {
                          title: 'Address',
                          key: 'address'
                      }
                  ],
        progressData: [],//调用接口获取数据，也可以是自己编写的数据
        pageData: [],//表格数据（随着分页而变化）
        page: 1//默认为第一页
      };
    },
    computed: {
    },
    methods: {
      loadData() {
         this.progressData = [];
         //接口参数
        let params = {};
        //接口
        tableData(params).then(({ result }) => {
          this.progressData = result;
          if (this.page) {
            this.pageData = this.progressData.slice(0, 30);
          } else {
            this.changeData();
          }
        });
      },
      //改变页码时的方法
      handlerPage(page) {
        this.changeData(page);
      },
      //修改数据
      changeData(page) {
        this.page = page;
        if (this.progressData.length > 30) {
          this.pageData = this.progressData.slice((page - 1) * 30, page * 30);
        } else {
          this.pageData = this.progressData;
        }
      }
    },
    created() {},
    mounted() {
      this.loadData();
    }
  };
  </script>
  
  <style>
  </style>
  
  